<%@page import="org.apache.jasper.tagplugins.jstl.core.ForEach"%>
<%@ page language="java" pageEncoding="utf-8"%>
<%@page import="com.etc.entity.User"%>
<%@page import="com.etc.service.impl.UserServiceImpl"%>
<%@page import="com.etc.service.UserService"%>
<%@page import="java.util.List"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
<%
	if (null == request.getSession().getAttribute("user")) {
		request.getRequestDispatcher("login.jsp").forward(request, response);
	}
%>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<title>Dashboard Template for Bootstrap</title>
<link rel="stylesheet" href="dist/css/bootstrap.min.css">

<script src="dist/js/jquery-3.3.1.min.js"></script>



<link href="css/dashboard.css" rel="stylesheet">
<script
	src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
   .navbar .nav > li:hover .dropdown-menu {
		display: block;
	}
</style>
</head>

<body>

	<nav class="navbar navbar-inverse navbar-fixed-top">
		<div class="container-fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed"
					data-toggle="collapse" data-target="#navbar" aria-expanded="false"
					aria-controls="navbar">
					<span class="sr-only">Toggle navigation</span> <span
						class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<ul class="nav navbar-nav">
					<li class="dropdown">
					    <a class="navbar-brand" href="#">问答系统</a>
						<a style="margin-left: 100px;" href="#" class="dropdown-toggle glyphicon glyphicon-user" data-toggle="dropdown"
						role="button" aria-haspopup="true" aria-expanded="false">欢迎~${user.userName}~登录管理系统<span class="caret"></span></a>
						<ul class="dropdown-menu" style="margin-left: 100px;">
							<li><a href="#">个人信息</a></li>
							<li><a href="#">切换账号</a></li>
							<li><a href="#">退出</a></li>
						</ul>
					</li>
				</ul>
			</div>
			<div id="navbar" class="navbar-collapse collapse">
				<ul class="nav navbar-nav navbar-right">
					<li><a id="imfor" href="#"></a></li>
					<li><a href="#">仪表盘</a></li>
					<li><a href="#">设置</a></li>
					<li><a href="LoginServlet?op=exit">退出</a></li>
					<li id="btnLo"><a id="modal-27331"
						href="#modal-container-27331" role="button" class="btn"
						data-toggle="modal">登录</a></li>
					<li id="btnExit" style="display: none;"><a
						href="${pageContext.request.contextPath}/UserServlet?op=queryPage"
						class="btn">退出</a></li>
					<li><a href="#">帮助</a></li>
				</ul>
				<form class="navbar-form navbar-right">
					<input type="text" id="searchName" class="form-control"
						placeholder="Search..." value="${nameLike==null?"":nameLike}" autofocus="autofocus">
					<input type="button" id="btnSearch" class="form-control" value="搜索">
				</form>
			</div>
		</div>
	</nav>

	<div class="container-fluid">
		<div class="row">
			<div class="col-sm-3 col-md-2 sidebar">
				<ul class="nav nav-sidebar">
					<li><a href="index.jsp">首页 <span class="sr-only">(current)</span></a></li>
					<li class="active"><a href="qs?op=queryPage">问答信息管理</a></li>
					<li><a href="addQuestion.jsp">增加问答信息</a></li>
					<li><a href="ab?op=queryPage">回答信息管理</a></li>
				</ul>
				<ul class="nav nav-sidebar">
					<li><a
						href="${pageContext.request.contextPath}/UserServlet?op=queryPage">用户管理</a></li>
					<li><a href="addUser.jsp">新增用户</a></li>
					<li><a href="EmpServlet?op=queryPage">员工管理</a></li>
					<li><a href="">Another nav item</a></li>
					<li><a href="">More navigation</a></li>
				</ul>
				<ul class="nav nav-sidebar">
					<li><a href="">Nav item again</a></li>
					<li><a href="">One more nav</a></li>
					<li><a href="">Another nav item</a></li>
				</ul>
			</div>
			<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

				<h2 class="sub-header">问答信息管理</h2>
				<div class="table-responsive">
					<table class="table table-striped">
						<thead>
							<tr>
								<th>问题序号</th>
								<th>标题</th>
								<th>内容</th>
								<th>时间</th>
								<th>发布用户</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							<c:if test="${pd.data!=null}">
								<c:forEach items="${pd.data}" var="question">
									<tr>
										<td>${question.qId}</td>
										<td>${question.qTitle}</td>
										<td>${question.qContent}</td>
										<td>${question.qDate}</td>
										<td>${question.userName}</td>
										<td><a id="modal-27331" href="#modal-container-27332"
											role="button" class="btn btn-warning update" data-toggle="modal">修改</a> <a
											id="del" href="javascript:delFunction(${question.qId})"><button
													id="btnDelete" class="btn btn-danger">删除</button></a></td>
									</tr>
								</c:forEach>
							</c:if>
						</tbody>
					</table>
					<div class="container">
						<div class="row clearfix">
							<div class="col-md-12 column">
								<ul class="pagination">
									<li><a href="javascript:void(0)" id="prePage">Prev</a></li>
									<c:forEach begin="1" end="${pd.totalPage}" var="index">
										<c:if test="${index>5}">
											<li style="display: none;"><a href="javascript:void(0)">....</a></li>
										</c:if>
										<c:if test="${index<=5}">
											<c:if test="${index==pd.page }">
												<li class="active"><a href="javascript:void(0)"
													class="pageNo">${index}</a></li>
											</c:if>
											<c:if test="${index!=pd.page }">
												<li><a href="javascript:void(0)" class="pageNo">${index}</a></li>
											</c:if>
										</c:if>
									</c:forEach>
									<li><a href="javascript:void(0)">....</a></li>
									<li><a href="javascript:void(0)" id="nexPage">Next</a></li>
									<li style="pointer-events: none;"><a style="color: gray;"
										href="javascript:void(0)">共 ${pd.totalPage} 页</a></li>
									<li>~~~~~~到第<input
										style="width: 30px;" type="text" name="inputPage" id="inputPage"
										value="${pd.page}" />页
									</li>
									<li><button class="btn btn-success" id="btnToPage">确定</button></li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="modal fade" id="modal-container-27332" role="dialog"
			aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div style="z-index: 10000;" class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">×</button>
						<form class="form-horizontal" role="form"
							action="${pageContext.request.contextPath}/qs?op=update"
							method="post">
							<div class="form-group" style="display: none;">
								<label for="qId" class="col-sm-2 control-label">请输入要修改的id</label>
								<div class="col-sm-8">
									<input type="text" required="required" class="form-control"
										name="qId" id="qId" />
								</div>
							</div>
							<div class="form-group">
								<label for="qTitle" class="col-sm-2 control-label">请输入要修改的标题</label>
								<div class="col-sm-8">
									<input type="text" required="required" class="form-control"
										name="qTitle" id="qTitle" value="" />
								</div>
							</div>
							<div class="form-group">
								<label for="qContent" class="col-sm-2 control-label">请输入要修改的内容</label>
								<div class="col-sm-8">
									<textarea rows="5" class="form-control" name="qContent"
										id="qContent"></textarea>
								</div>
							</div>

							<div class="form-group">
								<label for="qDate" class="col-sm-2 control-label">请输入要修改的时间</label>
								<div class="col-sm-8">
									<input type="datetime-local" required="required"
										class="form-control" name="qDate" id="qDate" />
								</div>
							</div>
							<div class="form-group">
								<label for="userId" class="col-sm-2 control-label">请输入要修改的发布者</label>
								<div class="col-sm-4">
									<select class="form-control" name="userId" id="userId">

									</select>
								</div>
							</div>
							<div class="form-group">
								<div class="col-sm-offset-5 col-sm-1">
									<button type="submit" style="width: 100px;"
										class="btn btn-danger">提交</button>
								</div>
							</div>
						</form>
					</div>
				</div>

			</div>
		</div>
		<div class="modal fade mtmst" id="modal-container-27331" role="dialog"
			aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div style="z-index: 10000;" class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">×</button>
						<div id="loginSucess" style="display: none;">登入成功，请关闭窗口</div>
						<form id="formLogin" class="form-signin" method="post"
							onsubmit="return check()">
							<h2 class="form-signin-heading">请登录</h2>
							<div id="msg" style="display: none;">用户名或密码错误</div>
							<label for="userNameLogin" class="sr-only">用户名</label> <input
								type="text" id="userNameLogin" name="userNameLogin"
								class="form-control" placeholder="用户名" required autofocus>
							<label for="passWordLogin" class="sr-only">密码</label> <input
								type="password" id="passWordLogin" name="passWordLogin"
								class="form-control" placeholder="密码" required>
							<div class="checkbox">
								<label> <input type="checkbox" value="remember-me">
									记住我
								</label>
							</div>
							<a><button id="btnlogin"
									class="btn btn-lg btn-primary btn-block" type="button">登录</button></a>
						</form>
					</div>
				</div>

			</div>
		</div>
	</div>
	<script src="layer.js"></script>
	<script src="dist/js/bootstrap.min.js"></script>
	<script type="text/javascript">
			$(function() {
				$("#btnlogin").click(function() {
					$.ajax({
						url: "${pageContext.request.contextPath}/UserServlet?op=login",
						type: "post",
						data: {
							"userNameLogin": $('#userNameLogin').val(),
							"passWordLogin": $('#passWordLogin').val()
						},
						success: function(data) { 
							if(data=="账号或密码错误"){
								$("#msg").css("display","block");
								$("#msg").css("color","red");
							}else{
								$("#btnLo").css("display","none");
								$("#btnExit").css("display","block");
								$("#imfor").text("欢迎"+data+"登录");
								$("#imfor").css("color","blue");
								$("#loginSucess").css("display","block");
								$("#formLogin").css("display","none");
							}
						}
					});
				});

			});
		</script>
	<script type="text/javascript">
	    $(function(){
			if(${pd.page >= pd.totalPage}){
				$("#nexPage").css("color","gray");
				$("#nexPage").css("pointer-events","none");
			}
			if(${pd.page<=1}){
				$("#prePage").css("color","gray");
				$("#prePage").css("pointer-events","none");
			}
			$(".pageNo").click(function(){
				location.href = "${pageContext.request.contextPath}/qs?op=queryPage&page=" + $(this).text()+"&nameLike="+$("#searchName").val();
				console.log($(this).text());
			});
			$("#nexPage").click(function(){
				location.href="${pageContext.request.contextPath}/qs?op=queryPage&page="+${pd.page+1}+"&nameLike="+$("#searchName").val();
			});
			$("#prePage").click(function(){
				location.href="${pageContext.request.contextPath}/qs?op=queryPage&page="+${pd.page-1}+"&nameLike="+$("#searchName").val();
			});
			$("#btnSearch").click(function(){
				   var nameLike = $("#searchName").val();
				   location.href = "${pageContext.request.contextPath}/qs?op=queryPage&nameLike="+nameLike;
			});
			$("#btnToPage").click(function(){
				location.href="qs?op=queryPage&page="+$("#inputPage").val()+"&nameLike="+$("#searchName").val();
			});
			var flag = true;
	        $("#searchName").on("compositionstart",function(){
	            flag = false;
	        })
	        $("#searchName").on("compositionend",function(){
	            flag = true;
	        })
			document.getElementById("searchName").oninput=function () {
	        	setTimeout(function(){
	        		if(flag){
	        			location.href="qs?op=queryPage&page="+$("#inputPage").val()+"&nameLike="+$("#searchName").val();
	        		}
	        	},0);
	        	//setCaretPosition($("#searchName"),$("#searchName").val().length);
	        	$("#searchName").focusEnd();
            }
	    });
	    
	    //搜索光标自动移到最后一位
	    $.fn.setCursorPosition = function(position){
	        if(this.lengh == 0) return this;
	        return $(this).setSelection(position, position);
	    }

	    $.fn.setSelection = function(selectionStart, selectionEnd) {
	        if(this.lengh == 0) return this;
	        input = this[0];

	        if (input.createTextRange) {
	            var range = input.createTextRange();
	            range.collapse(true);
	            range.moveEnd('character', selectionEnd);
	            range.moveStart('character', selectionStart);
	            range.select();
	        } else if (input.setSelectionRange) {
	            input.focus();
	            input.setSelectionRange(selectionStart, selectionEnd);
	        }

	        return this;
	    }

	    $.fn.focusEnd = function(){
	        this.setCursorPosition(this.val().length);
	    }
	    $("#searchName").focusEnd();
	    
	</script>
	<script type="text/javascript">
		function delFunction(qId) {
			layer.prompt({title: '请输入删除口令，并确认', formType: 1}, function(pass, index){
				  layer.close(index);
				  if(pass=="admin"){
					  layer.msg('删除成功');
					  location.href = "${pageContext.request.contextPath}/qs?op=delete&qId=" + qId;
				  }else{
					  layer.msg('密码错误，删除失败');
				  }
				   
			});
			/* console.log(qId);
			layer.confirm('是否确认删除？', {
				btn : [ '确定', '取消' ]
			//按钮
			}, function() {
				location.href = "${pageContext.request.contextPath}/qs?op=delete&qId=" + qId;
				layer.msg('删除成功', {
					time : 5000
				});
			}, function() {
				layer.msg('也可以这样', {
					time : 20000, //20s后自动关闭
					btn : [ '知道了' ]
				}, function() {
					location.reload();
				});
			}); */
		}
		$(".update").click(function(){
			$("#qId").val($(this).parents("tr").find("td").eq(0).text());
			$("#qTitle").val($(this).parents("tr").find("td").eq(1).text());
			$("#qContent").val($(this).parents("tr").find("td").eq(2).text());
		});
		/* function btnUpdate(qId){
			$("#qId").val(qId);
			console.log(qId);
		} */
	</script>
	<script type="text/javascript">
		$(function() {
			$.get("UserServlet?op=queryUser", function(data, status) {
                array=JSON.parse(data);
                $.each(array,function (index,user) {
                	$("#userId").append("<option value="+user.userId+">"+user.userName+"</option>");
                });
			});
		});
	</script>
</body>

</html>